
//订阅
class Dep {
    constructor() {
        this.subs = []; //存放所有的 Watcher
    }
    //订阅
    addSub(watcher) { //添加 Watcher
        this.subs.push(watcher)
    }
    //发布
    notify() {
        this.subs.forEach(watcher => watcher.update())
    }
}

// 观察者 (发布订阅)  观察者 被观察者
class Watcher {
    constructor(vm, expr, cb) {
        this.vm = vm;
        this.expr = expr;
        this.cb = cb;
        //默认先存放一个老值
        this.oldValue = this.get();
    }
    get() {
        Dep.target = this;
        let value = CompileUtil.getVal(this.vm, this.expr);
        Dep.target = null;
        return value;
    }
    update() { //更新操作 数据变化后 会调用观察着的updata方法
        let newVal = CompileUtil.getVal(this.vm, this.expr);
        if (newVal !== this.oldValue) {
            this.cb(newVal)
        }
    }
}

//数据劫持
class Observer {
    constructor(data) {
        this.observer(data);
    }
    observer(data) {
        //判断是否是对象才观察
        if (data && typeof data == 'object') {
            for (let key in data) {
                this.defineReactive(data, key, data[key]);
            }
        }
    }
    defineReactive(obj, key, value) {
        this.observer(value);
        let dep = new Dep()//给每个属性都加上一个具有发布订阅的功能
        Object.defineProperty(obj, key, {
            get() {
                //创建watcher时 获取到对应的内容，并把Watcher放到全局上
                Dep.target && dep.addSub(Dep.target)
                return value
            },
            set: (newVal) => {
                if (value != newVal) {
                    this.observer(newVal);
                    value = newVal
                    dep.notify();
                }
            }
        })
    }
}

// 编译数据以及节点
class Compiler {
    constructor(el, vm) {
        this.vm = vm
        //判断这个传过来的el是不是一个元素
        this.el = this.isElementNode(el) ? el : document.querySelector(el);
        let fragment = this.node2fragment(this.el);
        //用数据编译模板,吧this.$data塞入到页面中
        this.compile(fragment);
        //把存入的子节点移动回id为app的盒子中
        this.el.appendChild(fragment)
    }
    //判断是否是v-指令的方法
    isDirective(attrName) {
        return attrName.startsWith('v-')
    }
    //编译元素的方法
    compileElement(node) {
        //获取自定义属性
        let attributes = node.attributes;
        [...attributes].forEach(item => {
            let { name, value: expr } = item;
            if (this.isDirective(name)) {
                let [, directive] = name.split('-');
                let [directiveName, eventName] = directive.split(':')
                CompileUtil[directiveName](node, expr, this.vm, eventName)
            }
        })
    }
    //编译文本的方法
    compileText(node) {
        let content = node.textContent;
        //正则方法判断效验文本是否是需要的{{}}
        if (/\{\{(.+?)\}\}/.test(content)) {
            CompileUtil['text'](node, content, this.vm)
        }
    }
    compile(node) {//用来编译dom中的节点
        let childNodes = node.childNodes;
        [...childNodes].forEach(item => {
            //判断是文本节点还是元素节点
            if (this.isElementNode(item)) {
                //调用编译元素的方法
                this.compileElement(item)
                //如果是元素的话递归在调用一次获取他的子元素文本
                this.compile(item);
            } else {
                //调用编译文本的方法
                this.compileText(item)
            }
        })
    }
    //把节点移动到内存中
    node2fragment(node) {
        //创建空节点用来储存获取的子元素
        let fragment = document.createDocumentFragment();
        let firstChild;
        //while循环移动子元素到fragment创建的空节点中
        while (firstChild = node.firstChild) {
            fragment.appendChild(firstChild)
        }
        return fragment;
    }
    //封装判断节点的方法
    isElementNode(node) {
        // 判断节点类型是不是元素节点
        return node.nodeType === 1;
    }
}

CompileUtil = {
    getVal(vm, expr) { //
        return expr.split('.').reduce((data, current) => {
            return data[current]
        }, vm.$data)
    },
    setValue(vm, expr, value) {
        return expr.split('.').reduce((data, current, index, arr) => {
            if (index == arr.length - 1) {
                return data[current] = value;
            }
            return data[current]
        }, vm.$data)
    },
    model(node, expr, vm) { //node节点 ,expr 表达式 vm当前实例
        //给输入框赋予value属性 node.value = xxx
        let fn = this.updater['modelUpdater'];
        //给输入框加一个观察者 , 数据更新 同时更新数据
        new Watcher(vm, expr, (newVal) => {
            fn(node, newVal);
        });
        node.addEventListener('input', (e) => {
            let value = e.target.value;
            this.setValue(vm, expr, value);
        })
        let value = this.getVal(vm, expr);
        fn(node, value);
    },
    html(node,expr,vm) {
        let fn = this.updater['htmlUpdater']
        new Watcher(vm, expr, (newVal) => {
            fn(node, newVal);
        })
        let value = this.getVal(vm, expr);
        fn(node, value)
    },
    getContentValue(vm, expr) {
        //遍历表达式 重装内容返回回去           ...结构
        return expr.replace(/\{\{(.+?)\}\}/g, (...args) => {
            return this.getVal(vm, args[1]);
        })
    },
    on(node, expr, vm, eventName) {
        node.addEventListener(eventName,(e)=>{
            vm[expr].call(vm,e)
            // alert(1)
        });
    },
    text(node, expr, vm) {
        let fn = this.updater['textUpdater']
        let content = expr.replace(/{\{(.+?)\}\}/g, (...args) => {
            //给表达式每个{{}}都加上观察者
            new Watcher(vm, args[1], () => {

                fn(node, this.getContentValue(vm, expr))
            })
            return this.getVal(vm, args[1]);
        })
        fn(node, content)
    },
    updater: {
        modelUpdater(node, value) {
            node.value = value
        },
        htmlUpdater(node, value) {
            node.innerHTML = value
        },
        textUpdater(node, value) {
            node.textContent = value
        }
    }
}
// 
class Vue {
    constructor(options) {
        //获取参数放到this
        this.$el = options.el,
            this.$data = options.data
        let computed = options.computed;
        let methods = options.methods
        //判断element元素是否存在
        if (this.$el) {
            //报数据全部转化成Object.defineProperty来定义
            new Observer(this.$data);
            //把数据获取操作 vm上的取值操作 都代理到 vm.$data
            for (let key in computed) { //有依赖关系
                Object.defineProperty(this.$data, key, {
                    get: () => {
                        return computed[key].call(this);
                    }
                })
            }
            for(let key in methods){
                Object.defineProperty(this, key, {
                    get(){
                        return methods[key];
                    }
                })
            }
            this.proxyVm(this.$data);
            new Compiler(this.$el, this)
        }
    }
    proxyVm(data) {
        for (let key in data) {
            Object.defineProperty(this, key, {
                get() {
                    return data[key];
                },
                set(newVal){
                    data[key] = newVal;
                }
            })
        }
    }
}
